<template>
  <PageView :pageData="Page" @operateChange="operateChange"> </PageView>
</template>
<script setup>
import {
  getOrganizationList,
  deleteOrganization,
  editOrganization,
  addOrganization,
} from "@/api/organization";

import { getPermissionOrganization } from "@/api/permission";


const operateChange = (info, row) => {
  console.log(info, row);
};

const Page = markRaw({
  addBtn: {
    label: "添加",
    type: "primary",
    icon: "icon iconfont icon-add",
    method: addOrganization,
  },
  form: {
    data: [
      {
        type: "Input",
        field: "name",
        label: "应用名称",
        value: "",
        placeholder: "应用名称",
        allowClear: true,
      },
      {
        type: "RangePicker",
        field: "date",
        label: "日 期",
        value: null,
        valueFormat: "YYYY-MM-DD",
        arr2obj: ["startTime", "endTime"],
      },
    ],
    btns: [
      {
        label: "查询",
        key: "search",
        icon: "icon iconfont icon-sousuo1",
        type: "primary",
      },
    ],
  },
  table: {
    columns: [
      {
        title: "序号",
        key: "serial",
        width: 80,
      },
      {
        title: "组织名称",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "描述",
        dataIndex: "remark",
        key: "remark",
      },
      {
        title: "所属组织",
        dataIndex: "username",
        key: "username",
      },
      {
        title: "操作",
        width: 180,
        key: "operate",
        btns: [
          {
            label: "编辑",
            class: "table_edit-btn",
            icon: "icon iconfont icon-bianji",
            key: "edit",
            argKey: "roleId",
            method: editOrganization,
          },
          {
            label: "删除",
            class: "table_del-btn",
            icon: "icon iconfont icon-shanchu",
            key: "delete",
            content: "请确认是否删除？",
            argKey: "roleId",
            method: deleteOrganization,
          },
        ],
      },
    ],
    data: getOrganizationList,
  },
  modal: {
    title: "组织",
    width: 820,
    className: "spec-modal",
    data: [
      {
        type: "Input",
        field: "name",
        label: "组织名称：",
        value: "",
        labelWidth: "90px",
        placeholder: "组织名称",
        rules: [
          {
            required: true,
            message: "请输入组织名称",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Input",
        field: "name",
        label: "组织描述：",
        value: "",
        labelWidth: "90px",
        placeholder: "组织描述",
        rules: [
          {
            required: true,
            message: "请输入组织描述",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Cascader",
        field: "pca",
        label: "所属组织：",
        value: "",
        labelWidth: "90px",
        placeholder: "所属组织",
        arr2obj: ["orgaId", "orzId"],
        label2obj: ["orgaName", "orzName"],
        optionsProps: {
          label: "name",
          value: "id",
          children: "children",
        },
        options: getPermissionOrganization,
        rules: [
          {
            required: true,
            message: "请选择所属组织",
            trigger: "blur",
          },
        ],
      },
    ],
  },
});
</script>
<style scoped lang="scss"></style>
